<template>
  <div class="home">
    <!--    功能区域-->
    <div style="margin: 10px 0">
      <el-button type="danger" @click="openDialog">新增</el-button>
      <el-button type="danger">导入</el-button>
      <el-button type="danger">导出</el-button>


    </div>
    <!--    搜素区域-->
    <div style="margin: 10px 0">
      <!--@change事件可以获取当前改变的对象-->
      <el-select v-model="value" placeholder="Select" @change="optionClick($event)">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"

        >
        </el-option>
      </el-select>
      <!--      清空按钮 clearable-->
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable/>
      <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
    </div>
    <!--    stripe斑马纹 sortable排序-->
    <!--    创建表格-->
    <el-table :data="tableData" border stripe style="width: 100% ; " :header-cell-style="{textAlign: 'center'}"
              :cell-style="{textAlign: 'center'}">
      <el-table-column prop="seaBookingId" label="Id" sortable/>
      <el-table-column prop="seaBookingName" label="票名"/>
      <el-table-column prop="bookingNumber" label="总票数"/>
      <el-table-column prop="remainNumber" label="剩余票数"/>
      <el-table-column prop="bookingNumber,remainNumber" label="已购票数">
        <template #default="scope">{{ scope.row.bookingNumber - scope.row.remainNumber }}</template>
      </el-table-column>
      <el-table-column prop="bookingTime" label="有效期"/>
      <el-table-column prop="adultPrice" label="成人票/价格"/>
      <el-table-column prop="childPrice" label="儿童票/价格"/>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <!--        插槽名.row可以获取一行的内容，-->
          <!--        如果要获取行的索引，使用插槽名.$index，注意$符号是必不可少的，否则将不起作用。-->
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>

          <!--          <el-popconfirm title="确定要删除吗">弹窗提示框确定要删除吗-->
          <!--          @confirm事件单击确认按钮时触发-->
          <el-popconfirm title="确定要删除吗" @confirm="handleDelete(scope.row.bookingId)">
            <template #reference>
              <el-button type="text" size="small">Delete</el-button>
            </template>
          </el-popconfirm>
        </template>

      </el-table-column>
    </el-table>

    <!--    创建分页-->
    <div style="margin: 10px 0">
      <el-pagination
          v-model:currentPage="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

    <!--    弹窗功能，弹窗里面创建表单-->
    <el-dialog v-model="dialogVisible" :title=title width="30%">

      <!--      创建表单 弹窗里面的表单-->
      <el-form :model="form" label-width="120px">
        <el-form-item label="票名">
          <el-input v-model="form.bookingName" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="总票数">
          <el-input v-model="form.bookingNumber" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="有效期">
          <el-date-picker
              v-model="form.bookingTime"
              type="datetime"
              placeholder="请选择日期和时间"
              style="width: 80%"
              format="YYYY-MM-DD hh:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="成人票/价格">
          <el-input v-model="form.adultPrice" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="儿童票/价格">
          <el-input v-model="form.childPrice" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">提交</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import {ref} from "vue";
const value1 = ref('')
export default {
  name: "Booking",
  data() {
    return {
      search: '',
      currentPage: 1,
      pageSize: 3,
      total: 0,
      option: '',
      title: '',
      //设置弹窗为false，不显示
      dialogVisible: false,
      purchasedNumber : 0,
      options: ref([
        {
          value: 'booking_id',
          label: 'bookingId',
        },
        {
          value: 'booking_name',
          label: 'bookingName',

        },

      ]),
      value: ref(''),
      form: {},
      tableData: [
        {},

      ],

    }
  },
  created() {
    this.load()
  },
  methods: {
    //将后台查询的结果放到前台显示
    load() {

      request.get("/api/booking", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search,
          option: this.option

        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    //操作下的编辑按钮 修改数据
    handleEdit(row) {
      console.log(row);
      // JSON.stringify()【从一个对象中解析出字符串】
      //JSON.parse()【从一个字符串中解析出json对象】
      //因为传入的row是一行对象，所以先将row解析成字符串，再将字符串解析成JSON对象
      this.title = '修改订票信息'
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
      this.purchasedNumber = row.bookingNumber - row.remainNumber
      console.log(this.purchasedNumber)
    },

    //删除表格中的某一行
    handleDelete(id) {

      request.delete('/api/booking/' + id).then(res => {
        console.log(res);
        if (res.code == '0') {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.dialogVisible = false
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
        this.load()
      })

    },

    //改变每页的个数 ,element-plus提供了改变之后pageSize的值
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()

    },
    //改变当前页 element-plus提供了改变之后pageNum的值
    handleCurrentChange(pageNum) {

      this.currentPage = pageNum
      this.load()

    },

    //打开弹窗
    openDialog() {
      this.dialogVisible = true,
          this.form = {},
          this.title = '新增订票信息'
    },
    //插入数据
    save() {
      //如果表单里有id说明是更新操作，没有说明是插入操作
      if (this.form.bookingId) {
        request.put('/api/booking', this.form, {
          params: {
            purchasedNumber : this.purchasedNumber
          }
        }).then(res => {
          console.log(res);
          if (res.code == '0') {
            this.$message({
              type: 'success',
              message: '更新成功'
            })
            this.dialogVisible = false
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
          this.load()
        })
        //重新刷新表格中的数据

      } else {
        request.post("/api/booking",this.form,{
          params: {
            purchasedNumber : this.purchasedNumber
          }}
        ).then(res => {
          console.log(res);
          if (res.code == '0') {
            this.$message({
              type: 'success',
              message: '插入成功'
            })
            this.dialogVisible = false
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
          this.load()
        })

      }
    }
    ,
    optionClick(id) {
      this.option = id

    },


  },
  components: {},
}
</script>

<style scoped>

</style>